<template>
	<!-- 我的余额模块 -->
	<view :style="$theme.pageStyle">
		<view class='my-account'>
			<view class='wrapper'>
				
				<view class='header'>
					<view class='headerCon'>
						<view class='account acea-row row-top row-between'>
							<view class='assets'>
								<view>总资产(元)</view>
								<view class='money'>{{User.user_money || 0}}</view>
							</view>
							<view @click="ToUrl('/balance/recharge/index')" class='recharge' v-if="miniapp_audit != 1">充值</view>
						</view>
						<view class='cumulative acea-row row-middle'>
							<view class='item'>
								<view>累计充值(元)</view>
								<view class='money'>{{Account.recharge || 0}}</view>
							</view>
							<view class='item'>
								<view>累计消费(元)</view>
								<view class='money'>{{Account.consume || 0}}</view>
							</view>
						</view>
						<view class="pictrue">
							<image
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/141713611294anrBkj.gif">
							</image>
						</view>
					</view>
				</view>
				
				<view class="nav acea-row row-between-wrapper">
					<view class='item acea-row row-between-wrapper' @click="ToUrl('/balance/bill/log?type=1')">
						<view class="left">
							<view class="name">消费记录</view>
							<view>赚积分抵现金</view>
						</view>
						<view class="pictrue">
							<image
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/141713611354I71PfN.png">
							</image>
						</view>
					</view>
					<view class='item acea-row row-between-wrapper'  @click="ToUrl('/balance/bill/log?type=2')">
						<view class="left">
							<view class="name">充值记录</view>
							<view>满减享优惠</view>
						</view>
						<view class="pictrue">
							<image
								src="https://jiangxinsaas.oss-cn-beijing.aliyuncs.com/tuchuang/341713611374p2XTy4.png">
							</image>
						</view>
					</view>
				</view>
			</view>
			<view class="advert">
				<view class="title">账户变动记录</view>
				<view class="list-view">
					<view class="list-item" v-for="(item, index) in DataList" :key="index" hover-class="hover"
						:hover-stay-time="150" bindtap="detail">
						<view class="content-box">
							<view class="des-box">
								<view class="tit">
									{{ item.remark }}
								</view>
								<view class="time">{{ item.create_time }}</view>
							</view>
						</view>
						<view class="money">
							<span v-if="item.action == 2"> - {{ item.change_amount  }}</span>
							<span v-else> + {{ item.change_amount  }}</span>
						</view>
					</view>
				</view>
				<view style="margin-top: 40px;margin-bottom: 40px;" v-if="DataList.length === 0">
					<u-empty mode="order" text="没有记录" iconSize="70"
						textSize="16">
					</u-empty>
				</view>
				
			</view>
			<view style="height: 30px;"></view>
		</view>
	</view>
</template>

<script>
	import $H from '@/common/js/request.js';
	export default {
		data() {
			return {
				miniapp_audit: uni.getStorageSync('miniapp_audit'),
				is_withdraw: false,
				showBtn: false,
				DataList: [],
				User: {},
				Account: {},
				showModal: false,
				date: 'incomeMonth',
				tabs: ['获取金币', '金币用途', '金币记录'],
				tabIndex: 0,
				isLoading: false,
				ShowLoading: true,
				scroll: false,
				status: 0,
				pages: 1,
				limit: 15,
				page: 0,
				out: 0,
			}
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			});
			this.initData();
		},
		methods: {
			withdraw() {
				uni.navigateTo({
					url: '/balance/withdraw/index'
				})
			},
			async initData() {
				this.tabIndex = 0;
				this.getuser()
				this.timeer()
				this.account()
				// this.userData = await this.$api.mock('userData');
				// this.list = await this.$api.mock('incomeMonth');
			},
			async getFundList() {
				// this.list = await this.$api.mock(this.date);
			},
			timeer() {
				this.DataList = [];
				this.isLoading = false;
				this.scroll = false;
				this.status = 0;
				this.pages = 1;
				this.page = 0;
				this.out = 0;
				this.GetData();
			},
			GetData(e) {
				if (this.isLoading) {
					return;
				}
				if (this.page < this.pages) {
					this.out = 0;
					this.isLoading = true;
					this.scroll = false;
					this.status = 1;
					this.limit = 15;
					var page = this.page + 1;
					$H.post('user/balancelog', {
						'page': page,
						'limit': this.limit,
					}, {
						token: true
					}).then(res => {
						if (res.code == 1) {
							var list = res.data.data;
							for (let i = 0; i < list.length; i++) {
								//将数据逐条写入数组
								this.DataList.push(list[i]);
							}
							this.pages = res.data.last_page;
							this.page = page;
							this.scroll = true;
							this.isLoading = false;
							setTimeout(() => {
								this.ShowLoading = false
							}, 1000);

							this.out = 1;
							if (this.page == this.pages || res.data.total == 0) {
								this.status = 2;
							} else {
								this.status = 0;
							}

							uni.hideLoading();

						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					})
				}
			},
			account(){
				$H.post('user/account', {
				
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.Account = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getuser() {
				$H.post('user/center', {

				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						this.User = res.data
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			changeTab(index) {
				this.tabIndex = index;
				this.list = []
				if (this.tabIndex == 0) {
					this.date = 'incomeMonth';
					this.is_withdraw = false;
				} else if (this.tabIndex == 1) {
					this.date = 'incomeToday';
					this.is_withdraw = false;
				} else if (this.tabIndex == 2) {
					this.date = 'incomeYesterday';
					this.is_withdraw = false;
				} else if (this.tabIndex == 3) {
					this.date = 'incomeList';
					this.is_withdraw = true;
				}
				uni.showLoading({
					title: '加载中'
				});
				this.getFundList();
				setTimeout(() => {
					uni.hideLoading();
				}, 500);
			},
			navTo(url) {
				uni.navigateTo({
					url
				});
			},
			kefu() {
				this.showBtn = true
			},
			ToUrl(url) {
				uni.navigateTo({
					url: url
				})
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '加载中'
			});
			this.showModal = false
			this.initData();
			setTimeout(() => {
				uni.hideLoading();
			}, 500);
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 500);
		},
	}
</script>


<style scoped lang="scss">
	// /deep/.recommend{
	// 	padding: 40rpx 20rpx 0 20rpx;
	// }
	.my-account {
		.accountTitle {
			background-color: rgba(255, 68, 143, 0.1);
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			z-index: 99;

			.sysTitle {
				width: 100%;
				position: relative;
				font-weight: 500;
				color: #333333;
				font-size: 30rpx;

				.iconfont {
					position: absolute;
					font-size: 36rpx;
					left: 11rpx;
					width: 60rpx;
				}
			}
		}

		.advert {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			margin: 20rpx auto 0 auto;
			padding: 0 8px;
			.title {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				height: 108rpx;
				line-height: 108rpx;
				border-bottom: 1px solid #eee;
			}

			.list {
				margin-top: 34rpx;

				.line {
					height: 126rpx;
					width: 1rpx;
					background-color: #EEEEEE;
				}

				.item {
					text-align: center;
					font-weight: 400;
					color: #999999;
					font-size: 22rpx;

					.pictrue {
						width: 66rpx;
						height: 66rpx;
						margin: 0 auto;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.name {
						font-weight: 500;
						color: #333333;
						font-size: 28rpx;
						margin: 20rpx 0 8rpx 0;
					}
				}
			}
		}
	}

	.my-account .wrapper {
		padding-top: 32rpx;
		background: linear-gradient(180deg, rgba(255, 68, 143, 0.1) 0%, #f5f5f5 100%);
	}

	.my-account .wrapper .header {
		width: 710rpx;
		height: 362rpx;
		background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-light-3) 100%);
		border-radius: 32rpx;
		margin: 0 auto;
		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		position: relative;
	}

	.my-account .wrapper .header .headerCon {
		padding-top: 36rpx;
	}

	.my-account .wrapper .header .headerCon .pictrue {
		height: 284rpx;
		width: 290rpx;
		position: absolute;
		right: 0;
		bottom: 0;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-account .wrapper .header .headerCon .account {
		padding: 0 32rpx;
	}

	.my-account .wrapper .header .headerCon .account .assets .money {
		font-size: 64rpx;
		color: #fff;
		font-family: "SemiBold";
		margin-top: 12rpx;
	}

	.my-account .wrapper .header .headerCon .account .recharge {
		font-size: 24rpx;
		width: 112rpx;
		height: 56rpx;
		border-radius: 50rpx;
		background-color: rgba(255, 255, 255, 0.8);
		text-align: center;
		line-height: 56rpx;
		color: var(--color-primary);
		font-weight: 500;
	}

	.my-account .wrapper .header .headerCon .cumulative {
		width: 100%;
		height: 142rpx;
		background: rgba(255, 255, 255, 0.1);
		margin-top: 62rpx;
		padding-left: 32rpx;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	.my-account .wrapper .header .headerCon .cumulative .item {
		// flex: 1;
		width: 250rpx;
		position: static;
		z-index: 9;
	}

	.my-account .wrapper .header .headerCon .cumulative .item .money {
		font-size: 40rpx;
		font-family: 'SemiBold';
		color: #fff;
		margin-top: 12rpx;
	}

	.my-account .wrapper .nav {
		margin: 20rpx;
	}

	.my-account .wrapper .nav .item {
		font-size: 24rpx;
		color: #999;
		width: 348rpx;
		height: 152rpx;
		background: linear-gradient(180deg, #FFF7F0 0%, #FFFFFF 100%);
		border-radius: 24rpx;
		border: 4rpx solid #fff;
		padding: 0 31rpx;
		box-sizing: border-box;

		.name {
			font-size: 28rpx;
			color: #333;
			font-weight: 500;
			margin-bottom: 8rpx;
		}
	}

	.my-account .wrapper .nav .item .pictrue {
		width: 96rpx;
		height: 96rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.my-account .wrapper .list {
		padding: 0 30rpx;
	}

	.my-account .wrapper .list .item {
		margin-top: 44rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont {
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		background-image: linear-gradient(to right, #ff9389 0%, #f9776b 100%);
		text-align: center;
		line-height: 82rpx;
		color: #fff;
		font-size: 40rpx;
	}

	.my-account .wrapper .list .item .picTxt .iconfont.yellow {
		background-image: linear-gradient(to right, #ffccaa 0%, #fea060 100%);
	}

	.my-account .wrapper .list .item .picTxt .iconfont.green {
		background-image: linear-gradient(to right, #a1d67c 0%, #9dd074 100%);
	}

	.my-account .wrapper .list .item .picTxt {
		width: 428rpx;
		font-size: 30rpx;
		color: #282828;
	}

	.my-account .wrapper .list .item .picTxt .text {
		width: 317rpx;
	}

	.my-account .wrapper .list .item .picTxt .text .infor {
		font-size: 24rpx;
		color: #999;
		margin-top: 5rpx;
	}

	.my-account .wrapper .list .item .bnt {
		font-size: 26rpx;
		color: #282828;
		width: 156rpx;
		height: 52rpx;
		border: 1px solid #ddd;
		border-radius: 26rpx;
		text-align: center;
	}

	.my-account .wrapper .list .item .bnt.end {
		font-size: 26rpx;
		color: #aaa;
		background-color: #f2f2f2;
		border-color: #f2f2f2;
	}


	.acea-row.row-between {
		justify-content: space-between;
	}

	.acea-row.row-top {
		align-items: flex-start;
	}

	.acea-row {
		display: flex;
		flex-wrap: wrap;
	}

	.acea-row.row-middle {
		align-items: center;
	}

	.acea-row.row-between-wrapper {
		align-items: center;
		justify-content: space-between;
	}


	.list-view {
		position: relative;
		width: 100%;
		overflow: hidden;
	}

	.list-item {
		width: 100%;
		padding: 30rpx 0rpx;
		box-sizing: border-box;
		background: #fff;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		border-bottom: 1rpx solid #eaeef1;
	}

	.item-last::after {
		left: 0 !important;
	}

	.content-box {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.des-box {
		min-height: 80rpx;
		padding-left: 28rpx;
		box-sizing: border-box;
		vertical-align: top;
		color: #333;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tit {
		font-size: 32rpx;
		max-width: 420rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.source {
		margin: 12rpx 0;
	}

	.time {
		color: #888;
	}

	.money {
		font-size: 38rpx;
		font-weight: 500;
		color: #ff1e0f;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-left: 20rpx;
		font-family: "SemiBold";
	}

	.less {
		color: #4caf50 !important;
	}

	.tip {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-content: center;
		font-size: 24rpx;
		color: #888;
	}
</style>